<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2">
                            <div class="btns" @click="reLoadData">
                                <a-icon class="btns-icon" type="file-sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                    </a-col>
                </a-row>
            </div>
        </div>
        <nly-content>
            <!-- 列表 -->
            <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 200}" :pagination="pagination"   @change="onTableChange" :loading="false">
              <div slot="statusFilterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }">
                    <a-radio-group v-model="postData.status" @change="onConditionChange" style="flex-direction: column;">
                        <a-radio :style="radioStyle" :value="null">
                        所有
                        </a-radio>
                        <a-radio :style="radioStyle" :value="0">
                        未结算
                        </a-radio>
                        <a-radio :style="radioStyle" :value="1">
                        已结算
                        </a-radio>
                    </a-radio-group>
                </div>
            </a-table>
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { pageList} from "@/api/crm/call/callBill";


export default {
    data () {
        const columns = [
            {
                align: "left",
                title: "年份",
                dataIndex: "year",
                width: 120,
            },
             {
                align: "left",
                title: "月份",
                dataIndex: "month",
                width: 100,
            },
             {
                align: "center",
                title: "账单金额",
                dataIndex: "orderAmount",
                width: 80,
                customRender: (text, row, index) => {
                    let showText = text ?<span style="color:#F59A23;font-weight: 700;">{text}</span> : text;
                    return showText;
                },
            },
            {
                align: "left",
                title: "套餐名称",
                dataIndex: "baseSettingName",
                width: 120,
            },
             {
                align: "left",
                title: "月低费(元/月)",
                dataIndex: "baseCharges",
                width: 150,
            },
             {
                align: "left",
                title: "固定分钟数",
                dataIndex: "baseMinutes",
                width: 100,
            },
            {
                align: "left",
                title: "套餐内使用分钟数",
                dataIndex: "baseMinutesUsed",
                width: 100,
                 customRender: (text, row, index) => {
                    let showText = text ?<span style="color:#F59A23;font-weight: 700;">{text}</span> : text;
                    return showText;
                },
            },
            {
                align: "left",
                title: "超出部分费率(元/分钟)",
                dataIndex: "price",
                width: 100,
            },
            {
                align: "left",
                title: "超出分钟数",
                dataIndex: "otherMinutes",
                width: 100,
                 customRender: (text, row, index) => {
                    let showText = text ?<span style="color:#F59A23;font-weight: 700;">{text}</span> : text;
                    return showText;
                },
            },
            
            {
                align: "left",
                title: "超出部分总金额",
                dataIndex: "otherAmount",
                width: 100,
                 customRender: (text, row, index) => {
                        let { otherMinutes,price} = row;
                        if(!otherMinutes || !price)return 0.00;
                        let otherAmount = (otherMinutes*price).toFixed(2);
                        let showText = otherAmount ?<span style="color:#F59A23;font-weight: 700;">{otherAmount}</span> : otherAmount;
                        return showText;
                },
            },
            {
                align: "center",
                title: "状态",
                dataIndex: "status",
                width: 100,
                customRender: (text, row, index) => {
                    let showText = "";
                    switch(text){
                        case 0:showText = <span style="color:#CD0019;">未结算</span>;break;
                        case 1:showText = <span style="color:#028C10;">已结算</span>;break;
                    }
                    return showText;
                },
                scopedSlots: {
                    filterDropdown: 'statusFilterDropdown',
                    filterIcon: 'filterIcon',
                },
            },
        ];
        return {
            postData: {
                status:null,
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
        };
    },
    created(){
        this.reLoadData();
    },
    activated(){
        this.reLoadData();
    },
    mounted(){

    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
    },
    watch: {
    },
    methods: {
        reLoadData(){
            this.pageList();
        },
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
         userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        //获取列表
        pageList () {
            const { postData } = this;
            pageList(postData).then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    this.data.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
    }
};
</script>
<style lang="less" scoped>
</style>